<template>
  <div class="information-container">
    <el-card class="box-card">
      <el-form :model="form" ref="formRef" label-width="100px"  :rules="rules">
         <el-row>
              <el-col :span="24">
                <el-form-item label="标题"  prop="title" required>
                  <el-input v-model="form.title" style="width:100%;"></el-input>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="24">
                <el-form-item label="接收人" required>
                  <el-select v-model="form.receiveUserIds" multiple filterable remote reserve-keyword
                    placeholder="请输入用户名"
                    :remote-method="getUserByUserName"
                    style="width:100%;">
                    <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                  <el-form-item label="内容：" prop="content">
                    <el-input type="textarea" rows="13"  v-model="form.content" style="width:100%"></el-input>
                  </el-form-item>
              </el-col>
            </el-row>
            <el-row>
               <el-col :span="24">
                 <el-form-item>
                  <div class="btns">
                    <el-button class="btn" type="success" @click="submitForm">发送</el-button>
                    <el-button class="btn" type="danger" @click="resetForm">重置</el-button>
                    </div>
                </el-form-item>
              </el-col>
            </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data(){
    return {
      form: {
        title: '',
        content: '',
        receiveUserIds: []
      },
      options: [],
      rules: {
        title: [
          { required: true, message: '请输入消息标题', trigger: 'blur' }
        ],
        realName: [
          { required: true, message: '请输入消息内容', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    getUserByUserName(query){
     
      if (query !== '') {
        this.getRequest("/api/admin/user/selectByUserName",{
          userName: query
        }).then( resp => {
          if(resp && resp.code == 200){
            this.options = resp.obj;
          }
        })
      } else {
        this.options = [];
      }
    },
    submitForm(){
      this.$refs.formRef.validate( valid => {
        if(!valid){
          this.$message.error("请输入所有的必填项");
          return false;
        }else{
          this.postRequest("/api/admin/message/send",this.form).then( resp => {
            if(resp && resp.code == 200){
              this.$router.replace("/admin/information/list");
            }
          })
        }
      })
    },
    resetForm(){
      let lastId = this.form.id
      this.$refs.formRef.resetFields()
      this.form = {
        title: '',
        content: '',
        receiveUserIds: []
      }
      this.form.id = lastId
    }
  }
}
</script>

<style lang="scss" scoped>
.information-container{
  font-family: "华文楷体";
  .box-card{
      border-radius: 10px;
      color:#1A1A1A;
      .btns{
        display: flex;
        justify-content: flex-end;
        margin: 20px 0 10px 0 ;
      .btn{
        padding-left:  35px;
        padding-right:  35px;
        font-size: 14px;
        font-family: "华文楷体";
      }
    }
  }
  /deep/.el-form-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px !important;
  }
  /deep/.el-form-item__label{
    text-align: left;
  }
  /deep/.el-form-item__label-wrap {
    margin-left:  0 !important;
  }
}
</style>